<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>安全许可证生成系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --success-color: #4cc9f0;
            --warning-color: #f72585;
            --card-bg: #ffffff;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 2rem;
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .card {
            box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
            border: none;
            border-radius: 12px;
            overflow: hidden;
            background-color: var(--card-bg);
        }

        .card-header {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            padding: 1.5rem;
        }

        .form-label {
            font-weight: 500;
            color: #333;
        }

        .section-title {
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
            color: var(--primary-color);
            font-weight: 600;
        }

        .password-strength {
            margin-top: 0.5rem;
            height: 5px;
            border-radius: 2.5px;
            background-color: #e9ecef;
            overflow: hidden;
        }

        .strength-meter {
            height: 100%;
            width: 0;
            transition: width 0.3s ease, background-color 0.3s ease;
        }

        .password-rules {
            font-size: 0.85rem;
            margin-top: 0.5rem;
            color: #6c757d;
        }

        .password-rules ul {
            padding-left: 1.2rem;
            margin-bottom: 0;
        }

        .password-rules .valid {
            color: #28a745;
        }

        .password-rules .invalid {
            color: #dc3545;
        }

        .password-visibility {
            cursor: pointer;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #6c757d;
        }

        .input-group-password {
            position: relative;
        }

        .validation-feedback {
            display: block;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }

        .valid-feedback {
            color: #28a745;
        }

        .invalid-feedback {
            color: #dc3545;
        }

        .feature-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: white;
        }

        .feature-box {
            display: flex;
            align-items: center;
            padding: 10px;
            margin-bottom: 20px;
            background-color: rgba(67, 97, 238, 0.05);
            border-radius: 10px;
        }

        .feature-text h5 {
            margin-bottom: 5px;
            color: var(--primary-color);
        }

        .feature-text p {
            margin-bottom: 0;
            color: #555;
        }

        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }

            .card-header {
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card">
                <div class="card-header text-white">
                    <div class="d-flex align-items-center">
                        <div class="me-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
                                 viewBox="0 0 16 16">
                                <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
                                <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/>
                            </svg>
                        </div>
                        <div>
                            <h1 class="card-title mb-0">安全许可证生成系统</h1>
                            <p class="mb-0 opacity-75">生成安全的软件许可证文件</p>
                        </div>
                    </div>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-lg-12">
                            <form id="licenseForm" class="needs-validation" novalidate>
                                <!-- 证书基本信息 -->
                                <h5 class="section-title">证书基本信息</h5>
                                <div class="row g-3 mb-4">
                                    <div class="col-md-6">
                                        <label class="form-label">*证书持有者</label>
                                        <input type="text" class="form-control" name="subject" required
                                               placeholder="输入公司或个人名称">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">*证书有效期</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" name="issuedTime" id="issuedTime"
                                                   required>
                                            <span class="input-group-text">至</span>
                                            <input type="text" class="form-control" name="expireTime" id="expireTime"
                                                   required>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-3 mb-4">
                                    <div class="col-md-6">
                                        <label class="form-label">*秘钥库别称</label>
                                        <input type="text" class="form-control" name="privateAlias" required
                                               placeholder="输入秘钥库别名">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">*秘钥库密码</label>
                                        <div class="input-group-password">
                                            <input type="password" class="form-control" id="keyPass" name="keyPass"
                                                   required placeholder="至少6位，包含字母和数字">
                                            <span class="password-visibility" id="togglePassword">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                     fill="currentColor" viewBox="0 0 16 16">
                                                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                                                </svg>
                                            </span>
                                            <div class="password-strength mt-2">
                                                <div class="strength-meter" id="passwordStrength"></div>
                                            </div>
                                        </div>
                                        <div class="password-rules mt-2">
                                            <ul>
                                                <li class="invalid" id="lengthRule">至少6个字符</li>
                                                <li class="invalid" id="letterRule">包含至少一个字母</li>
                                                <li class="invalid" id="numberRule">包含至少一个数字</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-3 mb-4">
                                    <div class="col-md-6">
                                        <label class="form-label">*公钥库别名</label>
                                        <input type="text" class="form-control" name="publicAlias" required
                                               placeholder="输入公钥库别名">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">*公钥库密码</label>
                                        <div class="input-group-password">
                                            <input type="password" class="form-control" id="storePass" name="storePass"
                                                   required placeholder="至少6位，包含字母和数字">
                                            <span class="password-visibility" id="storePassTogglePassword">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                     fill="currentColor" viewBox="0 0 16 16">
                                                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                                                </svg>
                                            </span>
                                            <div class="password-strength mt-2">
                                                <div class="strength-meter" id="storePassPasswordStrength"></div>
                                            </div>
                                        </div>
                                        <div class="password-rules mt-2">
                                            <ul>
                                                <li class="invalid" id="storePassLengthRule">至少6个字符</li>
                                                <li class="invalid" id="storePassLetterRule">包含至少一个字母</li>
                                                <li class="invalid" id="storePassNumberRule">包含至少一个数字</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-3 mb-4">
                                    <div class="col-md-6">
                                        <label class="form-label">*用户类型</label>
                                        <select class="form-select" name="consumerType">
                                            <option value="user">用户</option>
                                            <option value="host">主机</option>
                                            <option value="process">进程</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">*用户数量</label>
                                        <input type="number" class="form-control" name="consumerAmount" value="1"
                                               min="1">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">证书描述</label>
                                        <input type="text" class="form-control" name="description"
                                               placeholder="输入证书描述信息">
                                    </div>
                                </div>

                                <!-- 硬件信息启用复选框 -->
                                <div class="form-check form-switch mb-4">
                                    <input class="form-check-input" type="checkbox" id="enableHardware">
                                    <label class="form-check-label" for="enableHardware">
                                        需要服务器硬件校验
                                    </label>
                                </div>

                                <!-- 服务器硬件信息 -->
                                <div id="hardwareSection" style="display: none;">
                                    <h5 class="section-title">服务器硬件信息</h5>
                                    <div class="row g-3 mb-4">
                                        <div class="col-md-6">
                                            <label class="form-label">IP地址（逗号分隔）</label>
                                            <input type="text" class="form-control" name="additionInfo.ipAddress"
                                                   placeholder="例如：192.168.1.1,192.168.1.2">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">MAC地址（逗号分隔）</label>
                                            <input type="text" class="form-control" name="additionInfo.macAddress"
                                                   placeholder="例如：00:1A:C2:7B:00:47,00:1A:C2:7B:00:48">
                                        </div>
                                    </div>
                                    <div class="row g-3 mb-4">
                                        <div class="col-md-6">
                                            <label class="form-label">CPU序列号</label>
                                            <input type="text" class="form-control" name="additionInfo.cpuSerial"
                                                   placeholder="输入CPU序列号">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">主板序列号</label>
                                            <input type="text" class="form-control" name="additionInfo.mainBoardSerial"
                                                   placeholder="输入主板序列号">
                                        </div>
                                    </div>
                                </div>

                                <!-- 提交按钮 -->
                                <div class="d-grid gap-2 mt-5">
                                    <button type="submit" class="btn btn-primary btn-lg py-3">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                             fill="currentColor" class="me-2" viewBox="0 0 16 16">
                                            <path d="M8.5 6.5a.5.5 0 0 0-1 0v3.793L6.354 9.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293V6.5z"/>
                                            <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
                                        </svg>
                                        生成证书
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 下载模态框 -->
    <div class="modal fade" id="downloadModal" tabindex="-1" aria-labelledby="downloadModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="downloadModalLabel">证书已生成</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>请选择要下载的文件：</p>
                    <div class="d-grid gap-2">
                        <button id="downloadLicenseBtn" class="btn btn-primary" type="button">
                            下载证书文件
                        </button>
                        <button id="downloadPublicKeyBtn" class="btn btn-secondary" type="button">
                            下载公钥文件
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入依赖 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/l10n/zh.js"></script>

<script>
    // 初始化日期选择器
    flatpickr("#issuedTime", {
        enableTime: true,
        dateFormat: "Y-m-d H:i:S",
        time_24hr: true,
        defaultDate: new Date(),
        locale: "zh",
        onChange: function (selectedDates, dateStr, instance) {
            if (selectedDates.length > 0) {
                const expireDate = new Date(selectedDates[0]);
                expireDate.setFullYear(expireDate.getFullYear() + 1);
                document.getElementById('expireTime')._flatpickr.setDate(expireDate);
            }
        }
    });

    flatpickr("#expireTime", {
        enableTime: true,
        dateFormat: "Y-m-d H:i:S",
        time_24hr: true,
        locale: "zh",
        defaultDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1))
    });

    // 控制硬件信息区域显示
    document.getElementById('enableHardware').addEventListener('change', function () {
        const hardwareSection = document.getElementById('hardwareSection');
        hardwareSection.style.display = this.checked ? 'block' : 'none';
    });

    // 密码显示/隐藏切换
    const togglePassword = document.getElementById('togglePassword');
    const storePassTogglePassword = document.getElementById('storePassTogglePassword');
    const passwordInput = document.getElementById('keyPass');
    const storePassPasswordInput = document.getElementById('storePass');

    togglePassword.addEventListener('click', function () {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);

        // 更新图标
        if (type === 'password') {
            this.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
            </svg>`;
        } else {
            this.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/>
                <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"/>
            </svg>`;
        }
    });
    storePassTogglePassword.addEventListener('click', function () {
        const type = storePassPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        storePassPasswordInput.setAttribute('type', type);

        // 更新图标
        if (type === 'password') {
            this.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
            </svg>`;
        } else {
            this.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/>
                <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"/>
            </svg>`;
        }
    });

    // 密码强度实时验证
    passwordInput.addEventListener('input', function () {
        const password = this.value;
        const strengthMeter = document.getElementById('passwordStrength');
        const lengthRule = document.getElementById('lengthRule');
        const letterRule = document.getElementById('letterRule');
        const numberRule = document.getElementById('numberRule');

        // 验证规则
        const hasMinLength = password.length >= 6;
        const hasLetter = /[a-zA-Z]/.test(password);
        const hasNumber = /\d/.test(password);

        // 更新规则显示状态
        lengthRule.className = hasMinLength ? 'valid' : 'invalid';
        letterRule.className = hasLetter ? 'valid' : 'invalid';
        numberRule.className = hasNumber ? 'valid' : 'invalid';

        // 计算密码强度
        let strength = 0;
        if (hasMinLength) strength += 1;
        if (hasLetter) strength += 1;
        if (hasNumber) strength += 1;

        // 更新强度条
        const width = (strength / 3) * 100;
        strengthMeter.style.width = `${width}%`;

        // 更新颜色
        if (strength === 0) {
            strengthMeter.style.backgroundColor = '#dc3545';
        } else if (strength === 1) {
            strengthMeter.style.backgroundColor = '#fd7e14';
        } else if (strength === 2) {
            strengthMeter.style.backgroundColor = '#ffc107';
        } else {
            strengthMeter.style.backgroundColor = '#28a745';
        }

        // 更新表单验证状态
        if (hasMinLength && hasLetter && hasNumber) {
            this.setCustomValidity('');
        } else {
            this.setCustomValidity('密码必须至少6位，且包含字母和数字');
        }
    });
    // 密码强度实时验证
    storePassPasswordInput.addEventListener('input', function () {
        const password = this.value;
        const storePassStrengthMeter = document.getElementById('storePassPasswordStrength');


        const storePassLengthRule = document.getElementById('storePassLengthRule');
        const storePassLetterRule = document.getElementById('storePassLetterRule');
        const storePassNumberRule = document.getElementById('storePassNumberRule');

        // 验证规则
        const hasMinLength = password.length >= 6;
        const hasLetter = /[a-zA-Z]/.test(password);
        const hasNumber = /\d/.test(password);

        // 更新规则显示状态
        storePassLengthRule.className = hasMinLength ? 'valid' : 'invalid';
        storePassLetterRule.className = hasLetter ? 'valid' : 'invalid';
        storePassNumberRule.className = hasNumber ? 'valid' : 'invalid';

        // 计算密码强度
        let strength = 0;
        if (hasMinLength) strength += 1;
        if (hasLetter) strength += 1;
        if (hasNumber) strength += 1;

        // 更新强度条
        const width = (strength / 3) * 100;
        storePassStrengthMeter.style.width = `${width}%`;



        // 更新颜色
        if (strength === 0) {
            storePassStrengthMeter.style.backgroundColor = '#dc3545';
        } else if (strength === 1) {
            storePassStrengthMeter.style.backgroundColor = '#fd7e14';
        } else if (strength === 2) {
            storePassStrengthMeter.style.backgroundColor = '#ffc107';
        } else {
            storePassStrengthMeter.style.backgroundColor = '#28a745';
        }
        // 更新表单验证状态
        if (hasMinLength && hasLetter && hasNumber) {
            this.setCustomValidity('');
        } else {
            this.setCustomValidity('密码必须至少6位，且包含字母和数字');
        }
    });

    // 表单提交处理
    document.getElementById('licenseForm').addEventListener('submit', function (e) {
        e.preventDefault();

        // 手动触发密码验证
        passwordInput.dispatchEvent(new Event('input'));
        storePassPasswordInput.dispatchEvent(new Event('input'));

        // 表单验证
        if (!this.checkValidity()) {
            e.stopPropagation();
            this.classList.add('was-validated');

            // 如果密码无效，显示提示
            if (passwordInput.validity.customError) {
                showNotification('密码不符合要求，请检查密码规则！', 'danger');
            }
            // 如果密码无效，显示提示
            if (storePassPasswordInput.validity.customError) {
                showNotification('密码不符合要求，请检查密码规则！', 'danger');
            }
            return;
        }

        // 收集表单数据并转换为嵌套对象
        const formData = new FormData(this);
        const data = {};
        formData.forEach((value, key) => {
            const keys = key.split('.');
            let current = data;
            for (let i = 0; i < keys.length - 1; i++) {
                if (!current[keys[i]]) current[keys[i]] = {};
                current = current[keys[i]];
            }
            current[keys[keys.length - 1]] = value;
        });

        // 动态处理 additionInfo 字段
        const enableHardware = document.getElementById('enableHardware').checked;
        if (!enableHardware) {
            delete data.additionInfo;
        }

        // 提交数据
        axios.post('/license/generateLicense', data, {
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => {
            console.log(response)
            // 检查返回状态码
            if (response.data.code === "200") {
                // 显示下载模态框
                const downloadModal = new bootstrap.Modal(document.getElementById('downloadModal'));
                downloadModal.show();

                // 设置下载事件
                document.getElementById('downloadLicenseBtn').onclick = () => {
                    triggerDownload('/license/download?file=license.lic', 'license.lic');
                };

                document.getElementById('downloadPublicKeyBtn').onclick = () => {
                    triggerDownload('/license/download?file=publicCerts.keystore', 'publicCerts.keystore');
                };
            } else {
                // 显示错误信息
                showNotification(response.data.msg, 'danger');
            }
        })
    });

    // 通知提示函数
    function showNotification(message, type) {
        // 移除现有通知
        const existingAlerts = document.querySelectorAll('.alert-notification');
        existingAlerts.forEach(alert => alert.remove());

        const alert = document.createElement('div');
        alert.className = `alert alert-${type} alert-notification position-fixed top-0 start-50 translate-middle-x mt-3`;
        alert.style.zIndex = '9999';
        alert.style.transition = 'opacity 0.5s';
        alert.innerHTML = `
            <div class="d-flex align-items-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="me-2" viewBox="0 0 16 16">
                    <path d="${type === 'success' ? 'M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z' : 'M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'}"/>
                </svg>
                <div>${message}</div>
            </div>
        `;
        document.body.appendChild(alert);
        // 3秒后移除通知
        setTimeout(() => {
            alert.style.opacity = '0';
            setTimeout(() => alert.remove(), 500);
        }, 3000);
    }
    // 文件下载函数
    function triggerDownload(url, filename) {
        axios.get(url, {
            responseType: 'blob'
        }).then(response => {
            const blob = new Blob([response.data]);
            const downloadUrl = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = downloadUrl;
            link.setAttribute('download', filename);
            document.body.appendChild(link);
            link.click();
            link.remove();
        }).catch(error => {
            console.error(`下载 ${filename} 失败`, error);
            showNotification(`下载 ${filename} 失败，请检查文件是否存在`, 'danger');
        });
    }
</script>
</body>
</html>
